import { useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Space, Toast } from 'antd-mobile'

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const GameLimits: React.FC<Props> = ({ visible, onClose }) => {

  const list = [
    { name: 'Maximum bet', value: 8000 },
    { name: 'Minimum bet', value: 10 },
    { name: 'Maximum win for one bet', value: 800000 },
  ]

  return (
    <Mask
      opacity={0.3}
      visible={visible}
      onMaskClick={() => onClose()}
    >
      <div
        className={styles.GameInfoMask}
      >
        <div className={styles.titleBox}>
          Game Limits
          <i className={styles.icon} onClick={() => { onClose() }}></i>
        </div>
        <div className={styles.content}>
          {
            list.map(({ name, value }) => (
              <div key={value} className={styles.flexLine}>
                <div>{name}:</div>
                <div className={styles.btn}>
                  {value}₹
                </div>
              </div>
            ))
          }
        </div>
      </div>
    </Mask>
  );
};

export default GameLimits;
